<!-- name -->
<template>
  <div class='review'>
    <div class="loge">
      <div class="image"></div>
      <div class="name">
        <div class="nickname">主播昵称</div>
        <input class="input" maxlength="20"
          placeholder-style="font-size: 13px;font-family: PingFang SC, PingFang SC-Regular;font-weight: 400;text-align: right;color: #dddddd;"
          type="text" placeholder="不超过20个字符" />
      </div>
    </div>
    <div class="introduce">
      <div class="name">主播介绍</div>
      <textarea class="information" maxlength="-1" placeholder="请输入主播介绍"
        placeholder-style="height: 18.5px;line-height: 18.5px;font-size: 13px;font-family: PingFang SC, PingFang SC-Regular;font-weight: 400;text-align: left;color: #dddddd;"></textarea>
    </div>
    <div class="classification">
      <div class="name">直播分类</div>
      <picker mode="selector" @change="bindPickerChange" :value="index" :range="array">
        <div class="container">
          <div class="choose">请选择</div>
          <div class="icon"></div>
        </div>
      </picker>
    </div>
    <div class="classification">
      <div class="name">地址</div>
      <picker mode="region" @change="bindRegionChange" :value="region" :custom-item="customItem">
        <div class="container">
          <div class="choose">请选择</div>
          <div class="icon"></div>
        </div>
      </picker>
    </div>
    <div class="certification">
      <div class="container">
        <div class="name">认证视频</div>
        <div class="size">（限时60S，大小30M）</div>
      </div>
      <div class="video">
        <div class="img"></div>
        <div class="text">
          <div class="container">
            <div class="upload" @click="upload">上传视频</div>
            <div class="icon"></div>
          </div>
        </div>
      </div>
    </div>
    <div class="shell">
      <div class="imges">
        <radio color="#4673f7" @click="ischecked" :checked="checked" />
      </div>
      <div class="video">【视频协议】</div>
      <div class="live">【直播协议】</div>
    </div>
    <div class="botton">开通直播</div>
  </div>
</template>

<script>

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {},
  // 接受父组件的传值
  props: {},

  data () {
    // 这里存放数据
    return {
      array: ['直播', '小视频', '短视频', '其他'],
      objectArray: [
        {
          id: 0,
          name: '直播'
        },
        {
          id: 1,
          name: '小视频'
        },
        {
          id: 2,
          name: '短视频'
        },
        {
          id: 3,
          name: '其他'
        }
      ],
      index: 0,
      region: [],
      customItem: '全部',
      // 控制单选框开关
      checked: false
    }
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 方法集合
  methods: {
    // 直播分类
    bindPickerChange (e) {
      // console.log(e)
      // e.mp.detail.value
    },
    // 地址
    bindRegionChange (e) {
      // console.log(e)
    },
    // 单选框
    ischecked () {
      this.checked = !this.checked
    },
    // 上传视频
    upload () {
      wx.chooseVideo({
        sourceType: ['album', 'camera'],
        compressed: true,
        maxDuration: 60,
        camera: 'back',
        success (res) {
          console.log(res)
          // 获取视频资源成功以后调用上传
          wx.uploadFile({
            // 服务器接口
            url: '',
            // 本地视频资源路径
            filePath: '',
            // 服务器定义的Key值
            name: '',
            success: function () {
              console.log('视频上传成功')
            },
            fail: function () {
              console.log('接口调用失败')
            }
          })
          // console.log(res.tempFilePath)
        },
        fail (err) {
          console.log(err)
        }
      })
    }
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created () {

  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted () {

  },
  // 生命周期 - 创建之前
  beforeCreate () { },
  // 生命周期 - 挂载之前
  beforeMount () { },
  // 生命周期 - 更新之前
  beforeUpdate () { },
  // 生命周期 - 更新之后
  updated () { },
  // 生命周期 - 销毁完成
  destroyed () { },
  // 如果页面有keep-alive缓存功能，这个函数会触发
  activated () { }
}
</script>
<style lang='scss' scoped>
//@import url(); 引入公共css类
@import "static/styles/color.scss";
.review {
  background: #f2f3f7;
  overflow: hidden;
  width: 100%;
  height: 100%;
  .loge {
    margin: 10px 15px;
    border: 10px solid #fff;
    border-radius: 10px;
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.07);
    .image {
      width: 87%;
      height: 150px;
      background: #f2f3f7;
    }
    .name {
      height: 40px;
      display: flex;
      justify-content: space-between;
      align-items: center;
      background: #fff;
      .nickname {
        height: 21px;
        font-size: 15px;
        font-family: PingFang SC, PingFang SC-Bold;
        font-weight: 700;
        color: #222222;
      }
      .input {
        font-size: 13px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: right;
        color: #dddddd;
      }
    }
  }
  .introduce {
    margin: 0 15px;
    border: 10px solid #fff;
    border-top: 7px solid #fff;
    border-radius: 10px;
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.07);
    .name {
      height: 25px;
      line-height: 25px;
      font-size: 15px;
      font-family: PingFang SC, PingFang SC-Bold;
      font-weight: 700;
      text-align: left;
      color: #222222;
      background: #fff;
    }
    .information {
      width:auto !important ;
      height: 100px;
      background: #f2f3f7;
      font-size: 13px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      text-align: left;
      color: #dddddd;
      padding: 9px;
    }
  }
  .classification {
    padding: 14.5px 7px 14.5px 10px;
    margin: 10px 15px;
    background: #ffffff;
    border-radius: 5px;
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.07);
    display: flex;
    justify-content: space-between;
    .name {
      height: 21px;
      line-height: 21px;
      font-size: 15px;
      font-family: PingFang SC, PingFang SC-Bold;
      font-weight: 700;
      text-align: left;
      color: #222222;
    }
    .container {
      display: flex;
      align-items: center;
      .choose {
        height: 21px;
        line-height: 21px;
        font-size: 15px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: right;
        color: #dddddd;
      }
      .icon {
        width: 5px;
        height: 15px;
        background: yellow;
        margin-left: 5px;
      }
    }
  }
  .certification {
    margin: 10px 15px;
    border: 10px solid #fff;
    background: #ffffff;
    border-radius: 5px;
    box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.07);
    .container {
      display: flex;
      height: 21px;
      align-items: center;
      .name {
        height: 21px;
        line-height: 21px;
        font-size: 15px;
        font-family: PingFang SC, PingFang SC-Bold;
        font-weight: 700;
        text-align: left;
        color: #222222;
      }
      .size {
        height: 16.5px;
        line-height: 16.5px;
        font-size: 12px;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: left;
        color: #999999;
      }
    }
    .video {
      display: flex;
      justify-content: space-between;
      .img {
        margin-top: 8px;
        width: 100px;
        height: 50px;
        background: #f2f3f7;
      }
      .text {
        display: flex;
        flex-direction: column-reverse;
        .container {
          display: flex;
          .upload {
            height: 21px;
            line-height: 21px;
            font-size: 15px;
            font-family: PingFang SC, PingFang SC-Regular;
            font-weight: 400;
            text-align: right;
            color: #dddddd;
            margin-right: 5px;
          }
          .icon {
            width: 5px;
            height: 10px;
            background: yellow;
          }
        }
      }
    }
  }
  .shell {
    height: 16.5px;
    display: flex;
    margin-left: 15px;
    align-items: center;
    .imges {
      radio {
        transform: scale(0.8);
      }
    }
    .video {
      height: 16.5px;
      font-size: 12px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      text-align: left;
      color: #4673f7;
    }
    .live {
      height: 16.5px;
      font-size: 12px;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
      text-align: left;
      color: #4673f7;
    }
  }
  .botton {
    height: 50px;
    line-height: 50px;
    font-size: 18px;
    font-family: PingFang SC, PingFang SC-Regular;
    font-weight: 400;
    text-align: center;
    color: #ffffff;
    background: #4673f7;
    border-radius: 5px;
    margin: 30px;
  }
}
</style>